<template>
<div class="home">
    <w-header></w-header>
    <b-container>
        <b-row class="mt-2">
            <b-col cols="12">
                <template>
                    <b-breadcrumb :items="breadcrumb"></b-breadcrumb>
                </template>
            </b-col>
        </b-row>
        <b-row class="usercenter">
            <b-jumbotron>
            </b-jumbotron>
        </b-row>
    </b-container>
    <b-container class="border">
        <b-jumbotron class="mt-5">
            <template v-slot:header>
                <b-img class="userphone" :src="user.avatar" thumbnail v-bind="userProps" style="width:100px;height:80px"></b-img>
            </template>
            <template v-slot:lead>
                <b-row>
                    <b-col md="6">
                        <div class="d-flex flex-column user">
                            <h2 style="color:white"> {{ user.username }} </h2>
                            <small style="color:white">{{ userasd.welcome }}</small>
                            <p class="number-lead" style="color:white">您发布的话题一共有{{ number }}个新的回复</p>
                        </div>
                    </b-col>
                    <b-col md="5" offset-md="1" style="display:flex;height:30px; margin-top:50px;">
                        <b-button class="block" variant="danger" to="/TopClass">创建话题分类</b-button>
                        <div style="margin-left:10px"></div>
                        <b-button class="block" variant="primary" to="/post">发布新话题</b-button>
                    </b-col>
                </b-row>
            </template>

        </b-jumbotron>
    </b-container>
    <b-container class="mt-5 hot">
        <b-row>
            <template v-for="(item) in filterlist">
                <b-col sm="3" :key="item.id">
                    <b-card :title="item.title" :img-src="item.imgUrl" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
                        <b-card-text class="justify-content-between">
                            <time>{{item.time}}</time>
                            <b-button @click="Topicdetails(item)" size="sm" variant="primary">查看话题</b-button>
                            <!-- :to="{name:'Topicdetails',params:{id:item.id}}"  -->
                            <span>
                                <em>
                                    <b-icon icon="chat"></b-icon>897
                                </em> <em>
                                    <b-icon icon="eye"></b-icon>{{item.eye}}
                                </em>

                                <em>
                                    <b-icon :icon="isActive?'heart-fill':'heart'" :class="{active:isActive}"></b-icon>
                                </em>

                            </span>
                        </b-card-text>

                    </b-card>
                </b-col>

            </template>
        </b-row>
    </b-container>
</div>
</template>

<script>
export default {
    name: "home",
    data() {
        return {
            userInfo: {
                id: 1,
                avavar: " http://localhost:8080/img/005.8837238e.jpg",
                username: "秋莫殇"
            },
            useradi: {},
            isActive: true,
            list: [],
            breadcrumb: [{
                    text: "首页",
                    href: "/home",
                },
                {
                    text: "个人中心",
                    href: "#",
                },
            ],
            url: require("../assets/005.jpg"),

            user: {
                username: "",
                avavar: "",

            },
            userasd: {
                welcome: "上午好,欢迎回来",
            },
            userProps: {
                blank: false,
                width: 75,
                height: 75,
            },
            number: "5",
            praise: Number,
        };
    },
    computed: {
        filterlist() {
            return this.list.filter((item) => {
                // if (item.title.length > 10) {
                //     item.title = item.title.substring(0, 10) + '...'
                // }
                if (item.imgArr === null || (item.imgArr instanceof Array && item.imgArr.length === 0)) {
                    item.imgArr = [require('../assets/004.jpg')]
                }
                return item
            })
        },

    },
    created() {
        this.Userlist();
        this.Usernameclass();
    },

    methods: {
        Topicdetails(row) {
            this.$router.push({
                name: 'Topicdetails',
                params: {
                    id: JSON.stringify(row)
                }
            })

        },
        Userlist() {
            if (this.list) {
                this.$artApi.islist(this.list).then((res) => {
                    console.log(res);
                    this.list = res.data
                })
            }
        },
        Usernameclass() {
            this.$userApi.currentUser(this.user).then((res) => {
                console.log(res);
                this.user = res.data
            })
        },
        isartPraise() {
            this.$userApi.artPraise(this.praise).then((res) => {
                console.log(res);
            })
        }

    },

};
</script>

<style lang="scss">
.home {
    .card {
        position: relative;
        padding-bottom: 5px;

        .card-body {
            padding-top: 0;
        }

        time {
            position: absolute;
            right: 0;
            top: 0;
            padding: 3px 15px;
            display: inline-block;
            line-height: 25px;
            background: rgba($color: white, $alpha: 0.5);
            color: #000;
            border-bottom-left-radius: 5px;
        }

        img {
            height: 150px;
            margin-bottom: 10px;
        }

        h4 {

            font-size: 16px;
            padding: 0 0 5px 0;
            border-bottom: 1px solid #eee;
            overflow: hidden;
            height: 35px;
            line-height: 35px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        p {
            margin: 0;
            display: flex;
            padding: 0 15px;

            em {
                font-style: normal;
            }

            em {
                svg.active {
                    color: red;
                }

                svg {
                    margin-right: 5px;
                }

                display: inline-block;
                margin-left: 5px;
                font-size: 12px;
            }
        }
    }

    .breadcrumb {
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 40px;

        a {
            color: #333;
            text-decoration: none;

        }

    }

    .hot {
        padding-left: 0px;
        padding-right: 0px;
    }

    .hot .col-sm-3 {
        margin-bottom: 25px;
    }

    .jumbotron {
        position: relative;
    }

    .jumbotron .display-3 {
        position: absolute;
    }

    .user {
        padding-left: 117px;

        h2 {
            font-size: 20px;
            font-weight: bold;
        }
    }

    .number-lead {
        margin-top: 10px;
        font-size: 14px;

    }

    .border {
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 5px;
        background-image: url('../assets/home-bg.jpg');
    }

    .block {
        display: block !important;
        width: 100% !important;
    }
}
</style>
